<template>
  <div class="quantity-box bg">
    <!--   标题区域   -->
    <div class="header">设备数量</div>
    <!--   内容区域   -->
    <div class="work-container">
      <a-row :gutter="12">
        <!--    左侧区域    -->
        <a-col :xl="8" :xxl="8">
          <div class="quantity-left">
            <img src="@/images/equipment/total.png" alt="" />
            <div class="number">{{ total }}</div>
            <div class="text">设备总数</div>
          </div>
        </a-col>
        <!--    右侧区域    -->
        <a-col :xl="16" :xxl="16">
          <div class="quantity-right flex flex-wrap flex-j-s-b flex-a-c">
            <div
              class="status-box flex flex-a-c"
              v-for="(item, index) in QuantityData"
              :key="index"
            >
              <img :src="item.img" alt="" />
              <div>
                <div class="label">{{ item.label }}</div>
                <div class="value" :style="{ color: item.color }">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import { QuantityData } from "../tabConfig";
export default {
  name: "index",
  data() {
    return {
      QuantityData,
      total: 0,
    };
  },
  mounted() {
    this.getStateCount();
  },
  methods: {
    // 获取设备数量
    async getStateCount() {
      const { data: res } = await api.StateCount();
      this.QuantityData.forEach((item) => {
        item.value = res[item.key];
      });
      this.total = res.all;
    },
    gotoThat() {
      // this.$store.commit("board/HeadNavType", 2);
      // localStorage.setItem("navType", 2);
      // this.$router.push("/equipmentList");
    },
  },
};
</script>

<style scoped lang="less">
@import "../../index";
</style>
